<template>
  <div class="app-container">
    <h1>订单详情列表</h1>

    <!-- 加载中 -->
    <div v-if="loading" class="loading-box">
      <span>正在加载订单数据...</span>
    </div>

    <!-- 空数据 -->
    <div v-else-if="orders.length === 0" class="no-data">
      暂无订单数据
    </div>

    <!-- 订单列表 -->
    <div v-else class="orders-wrapper">
      <div class="order-card" v-for="order in orders" :key="order.orderId">
        <h3>{{ order.name || '未命名订单' }}</h3>

        <table class="order-table">
          <tr>
            <th>订单ID</th>
            <td>{{ order.orderId }}</td>
            <th>创建时间</th>
            <td>{{ formatDate(order.createTime) }}</td>
          </tr>
          <tr>
            <th>名称</th>
            <td>{{ order.name }}</td>
            <th>场地</th>
            <td>{{ order.place }}</td>
          </tr>
          <tr>
            <th>客户名称</th>
            <td>{{ order.customerName }}</td>
            <th>拍摄时间</th>
            <td>{{ order.time }}</td>
          </tr>
          <tr>
            <th>客户备注</th>
            <td colspan="3">{{ order.customerRemark }}</td>
          </tr>
          <tr>
            <th>类型</th>
            <td>{{ order.type }}</td>
            <th>服装类型</th>
            <td>{{ order.clothType }}</td>
          </tr>
          <tr>
            <th>角色IP</th>
            <td>{{ order.cosIp || '-' }}</td>
            <th>Cos角色</th>
            <td>{{ order.cosName || '-' }}</td>
          </tr>
          <tr>
            <th>数量</th>
            <td>{{ order.num || 0 }}</td>
            <th>应付金额/实收金额</th>
            <td>{{ order.allPrice != null ? `¥${order.allPrice}` : '-' }}/{{ order.realPrice != null ? `¥${order.realPrice}` : '-' }}</td>
          </tr>
          <tr>
            <th>金额备注</th>
            <td>{{ order.remark || '-' }}</td>
          </tr>
          <tr>
            <th>是否授权展示</th>
            <td>{{ order.isShow ? '是' : '否' }}</td>
            <th>订单状态</th>
            <td><strong>{{ order.status }}</strong></td>
          </tr>
          <tr>
            <th>关联日程ID</th>
            <td>{{ order.linkSchedule || '-' }}</td>
            <th>返图链接</th>
            <td>
              <a v-if="order.linkPic" :href="order.linkPic" target="_blank" rel="noopener">查看返图</a>
              <span v-else>-</span>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllOrder } from "@/api/cd/order";

export default {
  name: 'CameraOrderList',
  data() {
    return {
      orders: [],
      loading: false
    };
  },
  created() {
    this.fetchOrders();
  },
  methods: {
    async fetchOrders() {
      this.loading = true;
      try {
        const res = await getAllOrder();
        // 正确提取 AjaxResult 中的 data 数据
        this.orders = Array.isArray(res.data) ? res.data : [];
      } catch (error) {
        console.error('获取订单失败:', error);
        this.$message?.error?.('加载订单失败，请检查网络或权限');
      } finally {
        this.loading = false;
      }
    },

    // 格式化日期（简单处理，可根据需要增强）
    formatDate(timestamp) {
      if (!timestamp) return '-';
      const date = new Date(timestamp);
      return date.toLocaleString();
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

/* 加载与空数据 */
.loading-box,
.no-data {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 16px;
}

/* 订单容器 */
.orders-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.order-card h3 {
  margin: 0;
  padding: 15px 20px;
  background-color: #f8f9fa;
  color: #333;
  font-size: 18px;
  border-bottom: 1px solid #eee;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.order-table th,
.order-table td {
  padding: 10px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.order-table th {
  width: 15%;
  background-color: #f5f5f5;
  color: #555;
  font-weight: 600;
  white-space: nowrap;
}

.order-table td {
  color: #333;
}

.order-table tr:last-child th,
.order-table tr:last-child td {
  border-bottom: none;
}

.order-table a {
  color: #1890ff;
  text-decoration: none;
}

.order-table a:hover {
  text-decoration: underline;
}
</style>